<!doctype html>
<html lang="zh-cn">
<head>
	<meta charset="UTF-8" />
	<title>Vue2.0</title>
	<link rel="stylesheet" href="css/bootstrap.css" />
	<script src="js/vue.js"></script>
	<script src="js/jquery-1.11.2.js"></script>
	<style>
     body{
	background: #eee;
     }
     .addclass{
	color:red;
     font-size:25px;
     }
      .addclass2{
	background: #666;
      }
   </style>
</head>
<body> 
	 <div class="container" >
	 
		<div class="panel panel-default" id="app">
			  <div class="panel-body">
			  	     <h1>vue2.0  表单控件绑定  文本框</h1>
                   	 <input type="text"  v-model="message"  />
                   	  <p>你输入的值 ：{{ message }}</p>
			  </div> 
		</div>	
		
		<div class="panel panel-default" id="app2">
			  <div class="panel-body">
			  	     <h1>vue2.0  表单控件绑定 多行文本框</h1>
                   	 <textarea  v-model="message"></textarea>
                   	  <p>你输入的值 ：{{ message }}</p>
			  </div> 
		</div>	
		
		 <div class="panel panel-default" id="app3">
			  <div class="panel-body">
			  	    <h1>vue2.0  表单控件绑定 复选框_逻辑值【较少用】</h1>
                   	<input type="checkbox" id="music" v-model="checked">
					<label for="music" onselectstart="return false"  style="-moz-user-select:none;">音乐： {{ checked }}</label>
					 	<input type="checkbox" id="sports" v-model="checked2">
					<label for="sports" onselectstart="return false"  style="-moz-user-select:none;">体育： {{ checked2 }}</label>
					 	<input type="checkbox" id="computer" v-model="checked3">
					<label for="computer" onselectstart="return false"  style="-moz-user-select:none;">电脑： {{ checked3 }}</label>
			  </div> 
		</div>
		
		 <div class="panel panel-default" id="app3_2">
			  <div class="panel-body">
			  	    <h1>vue2.0  表单控件绑定 复选框_获取值到数组</h1>
                    <input type="checkbox" id="iPhone6s"  value="苹果6s" v-model="checkNames"/>
                    <label for="iPhone6s">苹果6s</label>
                    <input type="checkbox" id="iPhone6s"  value="小米5s"  v-model="checkNames"/>
                    <label for="小米5s">小米5s</label>
                    <input type="checkbox" id="华为荣耀"  value="华为荣耀" v-model="checkNames"/>
                    <label for="华为荣耀">华为荣耀</label>
                    <p>获取到的文本值 {{ checkNames }}</p>
			  </div> 
		</div>	
		
		
		<div class="panel panel-default" id="app4">
			  <div class="panel-body">
			  	     <h1>vue2.0  表单控件绑定 单选按钮_获取值到数组</h1>
                     <input type="radio" id="boy" name="sex" value="男"  v-model="radios" />
                     <label for="boy">男</label>
                     <input type="radio" id="girl" name="sex" value="女"  v-model="radios" />
                     <label for="girl">女</label>
                     
                   	  <p>你输入的值 ：{{ radios }}</p>
			  </div> 
		</div>
		
			<div class="panel panel-default" id="app5">
			  <div class="panel-body">
			  	     <h1>vue2.0  表单控件绑定 下拉选择(下拉单选与下拉多选皆可)</h1>
                     <select v-model="selecteds" > <!--  下拉多选 multiple="true" -->
	                     <option >汕头</option>
	                     <option >北京</option>
	                     <option >上海</option>
	                     <option >广州</option>
                     </select>
                     
                   	  <p>你输入的值 ：{{ selecteds }}</p>
			  </div> 
		</div>
			
	   	
	 </div>
</body>
</html>
<script>
 new Vue({
  el: '#app',
  data: {
	  message:  ""
  }
});

 new Vue({
	  el: '#app2',
	  data: {
		  message:  ""
	  }
	});

 new Vue({
	  el: '#app3',
	  data: {
		  checked:  false,
		  checked2:  true,    // 默认选中 设置为true
		  checked3:  false
	  }
	});
 
 new Vue({
	  el: '#app3_2',
	  data: {
		 checkNames: ['小米5s']  //小米5s 默认选中 获取的是value值
	  }
	});
 
 new Vue({
	  el: '#app4',
	  data: {
		  radios : ['男']
	  }
	}); 
 
 new Vue({
	  el: '#app5',  
	  data: {
		  selecteds : ['汕头']  /* 如果需要下拉需要多选   则在html里 select标签添加 multiple="true"属性 -->*/
	  }
	}); 
 
</script>


